<template>
     <div style='width:100%;display:flex;flex-direction:column;background:#fff;'>
        <div style="padding:10px;font-weight:bold;border-bottom:1px solid #ddd;background:#fff;box-sizing:border-box;height:40px;" >{{name}}</div>
        <div style="display:flex;flex-direction:row;flex:1">
            <div style='width:400px' class='duty'>
                <el-calendar v-model="month">
                  
                </el-calendar>
            </div>
            <div style="flex:1" class="duty_detail">
                <div class='days'>{{days}}</div>
                <div class='duty_content'>
                    <div v-for="(item,index) in data" :key="index">{{item.section}}：{{item.users}}</div>
                </div>
                
            </div>
        </div>
        
    </div>
</template>
<script>
export default {
    props:["name","appid","url"],
    data(){
        return{
            month:"",
            days:"",
            data:[{"msg":"殡仪中心：张三，李四"}]
        }
    },
    created(){
        var myDate = new Date();
        let year=myDate.getFullYear();    //获取完整的年份(4位,1970-????)
        let month=myDate.getMonth()+1;       //获取当前月份(0-11,0代表
        let day=myDate.getDate();        //获取当前日(1-31)
        month=month<10 ? "0"+month:month;
        day=day<10 ? "0"+day:day;
        this.days= year+"-"+month+"-"+day
        this.loadData();
    },
    methods:{
        loadData(){
            this.$post(this.appid,this.url,{days:this.days}).then(data=>{
                this.data=data;
            })
        }
    },
    watch:{
        month(val){
           // alert(22)
            this.data=[]
            let year=val.getFullYear();    //获取完整的年份(4位,1970-????)
            let month=val.getMonth()+1;       //获取当前月份(0-11,0代表
            let day=val.getDate();        //获取当前日(1-31)
            month=month<10 ? "0"+month:month;
            day=day<10 ? "0"+day:day;
            this.days= year+"-"+month+"-"+day
            this.loadData();
        }
    }
}
</script>
<style scoped>
.duty>>>.el-calendar-day{
    height:35px;
}
.duty_detail{
    border-left:1px solid #ddd;
    padding:10px;
    display:flex;
    flex-direction:column;
}
.duty_content{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-content:center;
    text-align:center;
    font-size:18px;
    color:green;
}
.days{
    text-align:center;
    font-size:22px;
    font-weight:bold;
}
</style>